let $timerBtn = (function () {
  //get element
  let $btn = $('<input type="button" class="timer-button">'),
    cfg = {
      container:"body",
      title:"同意",
      delay:6,
      enabled:false,
      onClick:null
    },
    delay = 6,
    timer = null;

  $btn.css({
    height: "60px",
    width: "150px",
    "font-size": "1.2em"
  })

  function show(config) {
    $.extend(cfg,config);
    $(cfg.container).append($btn);

    //init status disable,text,delay
    $btn.val(cfg.title +'(' + delay + 's)');
    $btn.attr('disabled', 'disabled')

    //start timer,timeout button enable
    timer = setInterval(() => {
      $btn.val(cfg.title + '(' + --cfg.delay + 's)');
      if (cfg.delay === 0) {
        clearInterval(timer);
        $btn.val(cfg.title);
        $btn.removeAttr('disabled');
      }
    }, 1000)
    //click event
    $btn.click(cfg.onClick);
  }

  function destroy(){
    $btn.remove();
  }

  return {
    show,destroy
  }
})();


/*UI组件的面向对象封装
  1.{}Object
  let $timerBtn={
    show:function(){}
  };

  2.工厂函数（匿名函数的立即执行表达式+闭包）
  let $timerBtn=(function(){
    //..
    //function show(){

    //}
    return {
      show
    }
  })();

  3.构造函数
  function TimerBtn(){
  this.show = function(){}
  }
*/
